<template>
	<view class="hula-intro">
		<view class="top-background" :style="'background-image: url('+userInfo.background+');'">
			<view class="mask"></view>
		</view>

		<view class="info">
			<view class="back-arrow" :style="{'padding-top': paddingTop}">
				<uni-icons @click="toBackPage" style="margin-left: 30rpx;" type="left" size="30" color="#ffffff">
				</uni-icons>
				<view style="display: flex;flex-direction: row;">
					<uni-icons style="margin-right: 40rpx;" type="more-filled" size="30" color="#ffffff"></uni-icons>
				</view>
			</view>

			<view class="top-info">
				<view class="avatar">
					<image mode="aspectFill" :src="userInfo.avatar"></image>
				</view>

				<view class="right-info">
					<view class="nickname">{{userInfo.nickname}}</view>
					<view class="summary">{{userInfo.summary}}</view>
				</view>
			</view>

			<view class="bottom-info">

				<view class="user-data">
					<view class="item">
						<view class="item-top">
							{{userData.createCount}}
						</view>
						<view class="item-bottom">
							创作
						</view>

					</view>
					<view class="split-line"></view>
					<view class="item">
						<view class="item-top">
							{{userData.followedCount}}
						</view>
						<view class="item-bottom">
							粉丝
						</view>

					</view>
					<view class="split-line"></view>
					<view class="item">
						<view class="item-top">
							{{userData.followCount}}
						</view>
						<view class="item-bottom">
							关注
						</view>

					</view>
				</view>

				<view class="user-follow">
					<view @click="changeFollowStatus" v-if="userInfo.isFollowed" class="follow">-取关</view>
					<view @click="changeFollowStatus" v-else class="follow">+关注</view>
				</view>

			</view>

			<view class="content" style="min-height: 1200rpx;">


				<view class="spaces" v-if="windSpacesList && windSpacesList.length > 0">
					<view class="space" v-for="space in windSpacesList" @click="gotoSpaceDetail(space.id,space.type)">
						<view class="space-cover">
							<image mode="aspectFill" :src="space.cover"></image>
						</view>
						<view class="space-name">{{space.name}}</view>
					</view>
				</view>


				<view class="tabs">
					<view v-for="(item,index) in contentTypes">
						<view @click="changeContentTab(index)" class="tab" :class="index == currentType ? 'tab-current': '' ">
							<view>{{item}}</view>
							<!-- <view v-if="index == postPage.visibility" class="tab-line"></view> -->
						</view>
					</view>
				</view>

				<view class="mind-list" v-if="currentType == 0">
					<view class="mind" v-if="mindList.length == 0">
						<view class="mind-tabs">
							<view v-for="(item,index) in mindSordTypes">
								<view @click="changeMindTab(index)" class="tab" :class="index == mindQueryInput.type ? 'tab-current': '' ">
									<view>{{mindSordTypes[index]}}</view>
								</view>
							</view>
						</view>
						<view>暂无内容</view>
					</view>
					<view class="mind" v-for="(item, index) in mindList" :key="index">
						<view v-if="index == 0" class="mind-tabs">
							<view v-for="(item,index) in mindSordTypes">
								<view @click="changeMindTab(index)" class="tab" :class="index == mindQueryInput.type ? 'tab-current': '' ">
									<view>{{mindSordTypes[index]}}</view>
								</view>
							</view>
						</view>
						<view v-if="item.type != 4" @tap="toQuestionDetail(item.questionListVO,item.type)"
							:data-item="item" class="card">
							<view class="mind-date">{{ item.gmtCreate }} {{ mindTypes[item.type] }}</view>
							<view class="question-title">{{ item.questionListVO.title }}</view>
							<view class="question-point">观点：{{ item.questionListVO.point }}</view>
							<view class="question-answer">回答：{{item.questionListVO.answer | getSimpleText}}</view>
						</view>
						<view v-if="item.type == 4" class="card">
							<view class="mind-date">{{ item.gmtCreate }} 输出一条mind</view>
							<view class="tip-content">{{ item.content }}
							</view>
						</view>
					</view>
				</view>
				
				
				<view class="wind-list" v-if="currentType == 1">
				
					<view class="wind" v-if="windList.length == 0">
						<view class="wind-tabs">
							<view v-for="(item,index) in windSordTypes">
								<view @click="changeWindTab(index)" class="tab" :class="index == windQueryInput.type ? 'tab-current': '' ">
									<view>{{windSordTypes[index]}}</view>
								</view>
							</view>
						</view>
						<view>暂无内容</view>
					</view>
				
					<view class="wind" v-for="(item, index) in windList" :key="index">
						<view v-if="index == 0" class="wind-tabs">
							<view v-for="(item,index) in windSordTypes">
								<view @click="changeWindTab(index)" class="tab" :class="index == windQueryInput.type ? 'tab-current': '' ">
									<view>{{windSordTypes[index]}}</view>
								</view>
							</view>
						</view>
				
						<view class="wind-date">{{item.gmtCreate}} {{ windTypes[item.type] }}</view>
				
						<view v-if="item.type <= 2">
							<view class="wind-content" v-html="item.postInfoVO.content"></view>
							<view class="wind-pictures" v-if="item.postInfoVO.pictures && item.postInfoVO.pictures.length > 0">
								<view v-for="picture in item.postInfoVO.pictures" class="picture"
									@tap="ViewImage(picture,item.postInfoVO.pictures)">
									<image mode="aspectFill" :src="picture" />
								</view>
							</view>
						</view>
				
						<view v-if="item.type <= 5 && item.type >= 4">
							<view class="wind-content" v-html="item.commentListVO.content"></view>
							<view class="wind-pictures"
								v-if="item.commentListVO.pictures && item.commentListVO.pictures.length > 0">
								<view v-for="picture in item.commentListVO.pictures" class="picture"
									@tap="ViewImage(picture,item.commentListVO.pictures)">
									<image mode="aspectFill" :src="picture" />
								</view>
							</view>
						</view>
				
						<view v-if="item.type == 6">
							<view class="wind-content" v-html="item.talkListVO.content"></view>
						</view>
				
				
				
					</view>
				</view>

				<view class="hula-info"  v-if="currentType == 2">
					<view class="info-item">
						<view class="title">
							<view>候浪目标</view>
						</view>
						<view class="info-card">
							{{userHula.goal}}
						</view>
					</view>
					
					<view class="info-item">
						<view class="title">
							<view>执行情况</view>
						</view>
						<view class="info-card">
							匹配飓风中
						</view>
					</view>
					
					<view class="info-item">
						<view class="title">
							<view>当前状态</view>
						</view>
						<view class="info-card">
							{{userHula.statusNow}}
						</view>
					</view>
					
					<view class="info-item">
						<view class="title">
							<view>期望状态</view>
						</view>
						<view class="info-card">
							{{userHula.statusWish}}
						</view>
					</view>
					
					<view class="info-item">
						<view class="title">
							<view>向导期望</view>
						</view>
						<view class="info-card">
							{{userHula.description}}
						</view>
					</view>
					
					<view class="info-item">
						<view class="title">
							<view>能力表现</view>
						</view>
						<view class="info-card">
							{{userHula.ability}}
						</view>
					</view>
					
					<view class="info-item">
						<view class="title">
							<view>兴趣取向</view>
						</view>
						<view class="info-card">
							爱好：{{userHula.hobby}},游戏：{{userHula.games}}
						</view>
					</view>
					
					<view class="info-item">
						<view class="title">
							<view>关键问题</view>
						</view>
						<view class="info-card">
							高富帅
						</view>
					</view>
					
					<view style="width: 690rpx;height: 120rpx;text-align: center;line-height: 120rpx;
					color: #144C5D;background-color: #5DACB1;margin-left: 30rpx;border-radius: 20rpx;font-size: 36rpx;font-weight: bold;color: #FFFFFF;">
						成为ta的候浪者
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				userHula:{},
				userData:{},
				
				
				contentTypes: ["思考", "创作", "候浪计划", "历史决策"],
				currentType: 0,
				
				
				
				mindList: [],
				mindTypes: ['', '发起一个提问', '提出一个观点', '输出一个回答', '输出一条mind'],
				mindSordTypes: ["全部", "提问", "观点", "回答", "想法"],
				currentMindSortType:0,
				mindQueryInput: {
					pageNow: 1,
					pageSize: 20,
					total: 0,
					userId:null,
					type:0,
					visibility:2
				},
				
				
				
				windList:[],
				windTypes: ['', '刻入一个记忆', '发表一个帖子', '发表一篇文章', '输出一个评论', '输出一个回复', '刻入一条箴言'],
				windSordTypes: ["全部", "记忆", "帖子", "文章", "评论", "箴言"],
				currentWindSortType:0,
				windQueryInput: {
					pageNow: 1,
					pageSize: 20,
					total: 0,
					userId:null,
					type:0,
					visibility:2
				},
				
				windSpacesList:[],
				
				
				
				paddingTop: null
			};
		},
		onReachBottom() {
			switch(this.currentType){
				case 0:
					this.mindQueryInput.pageNow++
					this.$api.pageMind(this.mindQueryInput).then(res => {
						this.mindList = [...this.mindList, ...res.data.rows]
					})
					break;
				case 1:
					this.windQueryInput.pageNow++
					this.$api.pageMind(this.windQueryInput).then(res => {
						this.windList = [...this.windList, ...res.data.rows]
					})
					break;
				case 2:
					break;
				case 3:
					break;
			}
			
		},
		onLoad(options) {
			if(options.userId){
				this.userInfo.id = options.userId
				this.getUserFollowInfo()
				this.getUserData()
				
				this.mindQueryInput.userId = options.userId
				this.pageMind();
				this.windQueryInput.userId = options.userId
				this.pageWind();
				
				this.listWindSpace();
			}
			// 调整搜索位置
			// #ifdef MP-WEIXIN
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();
			// // 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx';
			this.paddingTop = menuButton.top * (750 / windowWidth) + 'rpx';
			// #endif
		},
		methods: {
			getUserData() {
				this.$api.getUserData({
					id:this.userInfo.id
				}).then(res => {
					this.userData = res.data;
				})
			},
			getUserHula() {
				this.$api.getUserHula({
					id:this.userInfo.id
				}).then(res => {
					this.userHula = res.data;
				})
			},
			getUserFollowInfo() {
				this.$api.getUserFollowInfo({
					id:this.userInfo.id
				}).then(res => {
					this.userInfo = res.data;
					if (res.data.role > 1) {
						this.getUserHula()
					}
				})
			},
			
			
			pageMind() {
				this.mindQueryInput.pageNow = 1
				this.$api.pageMind(this.mindQueryInput).then(res => {
					this.mindList = res.data.rows
				})
			},
			pageWind() {
				this.windQueryInput.pageNow = 1
				this.$api.pageWind(this.windQueryInput).then(res => {
					this.windList = res.data.rows
				})
			},
			
			listWindSpace() {
				this.$api.listWindSpace({
					userId:this.userInfo.id
				}).then(res => {
					this.windSpacesList = res.data
				})
			},
			
			changeFollowStatus() {
				this.$api.changeUserFollowStatus({
					id: this.userInfo.id
				}).then(() => {
					this.getUserData()
					this.userInfo.isFollowed = !this.userInfo.isFollowed
				})
			},
			
			
			
			
			
			changeMindTab(index){
				this.mindQueryInput.type = index
				this.pageMind()
			},
			changeWindTab(index){
				this.windQueryInput.type = index
				this.pageWind()
			},
			changeContentTab(index){
				this.currentType = index
				switch(index){
					case 0 :
						this.pageMind()
						break;
					case 1 :
						this.pageWind()
						break;
					case 2 :
						break;
					case 3 :
						break;
				}
			},
			ViewImage(current, urls) {
				uni.previewImage({
					urls,
					current
				});
			},
			
			
			
			
			toQuestionDetail(questionListVO, mindType) {
				switch (mindType) {
					case 1:
						uni.navigateTo({
							url: '/pages_modex/question/question-detail?questionId=' + questionListVO.id
						});
						break;
					case 2:
						uni.navigateTo({
							url: '/pages_modex/question/answer?pointId=' + questionListVO.pointId +
								"&questionId=" + questionListVO.id
						});
						break;
					case 3:
						uni.navigateTo({
							url: '/pages_modex/question/answer-detail?answerId=' + questionListVO.answerId +
								"&pointId=" + questionListVO.pointId + "&questionId=" + questionListVO.id
						});
						break;
				}
			
			},
			
			
			gotoSpaceDetail(id, type) {
				if (type === 3) {
					uni.navigateTo({
						url: '/pages_being/course/course-detail?courseId=' + id
					});
				} else{
					uni.navigateTo({
						url: '/pages_being/island/island-detail?islandId=' + id
					});
				}
			
			},
			toBackPage(){
				uni.navigateBack()
			}
		},
		filters:{
			getSimpleText(html) {
				var re1 = new RegExp("<.+?>", "g"); //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
				var msg = html.replace(re1, ''); //执行替换成空字符
				return msg;
			}
		}
	}
</script>

<style scoped lang="scss">
	.hula-intro {


		.top-background {
			position: fixed;
			z-index: 1;

			width: 100%;
			height: 600rpx;

			background-repeat: no-repeat;
			background-size: cover;
			


			.mask {
				height: 100%;
				width: 100%;
				position: absolute;
				top: 0;
				left: 0rpx;
				background: rgba(0, 0, 0, 0.3);
				z-index: 2;
			}
		}

		.info {
			position: relative;
			z-index: 2;

			display: flex;
			flex-direction: column;



			.back-arrow {
				width: 100%;

				//#ifdef MP-WEIXIN
				width: 550rpx;
				//#endif

				padding-top: 100rpx;

				// #ifdef H5
				padding-top: 40rpx;
				// #endif

				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.top-info {
				width: 690rpx;
				margin-left: 30rpx;

				margin-top: 80rpx;

				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;


				.avatar {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					overflow: hidden;
					border: solid #FFFFFF;
				}

				.right-info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 500rpx;


					.nickname {
						color: white;
						font-size: 40rpx;
					}

					.summary {
						font-size: 28rpx;
						margin-top: 10rpx;
						color: #e1e1e1;
					}

				}
			}


			.bottom-info {
				width: 690rpx;
				margin-left: 30rpx;
				margin-top: 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 30rpx;

				.user-data {
					display: flex;
					flex-direction: row;
					font-size: 26rpx;
					color: #eeeeee;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.item {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						width: 150rpx;
						height: 80rpx;

						.item-top {
							font-size: 36rpx;
							color: #ffffff;
						}

						.item-bottom {
							font-size: 28rpx;
							color: #e1e1e1;
						}
					}

					.split-line {
						width: 3rpx;
						height: 60rpx;
						background-color: #d1d1d1;
					}
				}

				.user-follow {
					border: solid #FFFFFF;
					color: #FFFFFF;
					padding: 10rpx 50rpx;
					border-radius: 40rpx;
				}
			}




			.content {
				width: 100%;
				background-color: #F9F9F9;
				border-radius: 40rpx;
				margin-top: 20rpx;
				padding-bottom: 100rpx;

				.spaces {

					display: flex;
					flex-direction: row;

					overflow-x: scroll;
					width: 710rpx;
					height: 245rpx;
					
					margin-left: 30rpx;
					margin-top: 40rpx;

					.space {
						flex-shrink: 0;
						width: 260rpx;
						height: 230rpx;
						margin-right: 20rpx;
						border-radius: 20rpx;
						background-color: #FFFFFF;
						
						display: flex;
						flex-direction: column;
						
						.space-cover{
							width: 260rpx;
							height: 160rpx;
							border-radius: 20rpx 20rpx 0 0;
							overflow: hidden;
						}
						
						.space-name{
							
							margin: 10rpx;
							font-size: 28rpx;
							
							/*超过范围进行隐藏不显示*/
							overflow: hidden;
							/*文本溢出, 使用省略号 */
							text-overflow: ellipsis;
							/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
							display: -webkit-box;
							/*限制块容器显示的文本行数, 按照你的需求设置*/
							-webkit-line-clamp: 1;
							/*盒子的方向, 垂直、水平等*/
							-webkit-box-orient: vertical;
							/*文字换行, 可以在单词内断*/
							word-wrap: break-word;
						}

					}
				}




				.tabs {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 30rpx;
					margin-top: 30rpx;

					.tab {
						margin-left: 30rpx;
						color: gray;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;
						padding: 5rpx 25rpx;

						background-color: #FFFFFF;
						border-radius: 15rpx;

						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
					}

					.tab-current {
						color: #FFFFFF;
						background-color: #5DACB1;
						font-weight: bold;
					}
				}

				.mind-list {
					margin-top: 30rpx;

					.mind {
						display: flex;
						flex-direction: column;
						background-color: #FFFFFF;
						margin-bottom: 30rpx;
						border-radius: 20rpx;
						width: 630rpx;
						padding: 30rpx;
						margin-left: 30rpx;
						
						
						
						.mind-tabs {
							display: flex;
							flex-direction: row;
							align-items: center;
							// border-bottom: solid thin #d3d3d3;
						
							.tab {
								margin-right: 20rpx;
								color: gray;
								height: 60rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								align-items: center;
							}
						
							.tab-current {
								color: #2c2c2c;
								font-weight: bold;
							}
					
						
						
						}
						

						.mind-date {
							color: gray;
							font-size: 24rpx;

							display: flex;
							flex-direction: row;
							justify-content: space-between;
						}

						.tip-content {
							margin-top: 10rpx;
							color: rgb(43, 42, 42);
						}

						.question-title {
							margin-top: 10rpx;
							font-size: 110%;
							font-weight: bold;
							color: #000222;
						}

						.question-point {
							margin-top: 10rpx;
							color: rgb(43, 42, 42);
							margin-bottom: 10rpx;
						}

						.question-answer {
							color: rgb(43, 42, 42);

							/*超过范围进行隐藏不显示*/
							overflow: hidden;
							/*文本溢出, 使用省略号 */
							text-overflow: ellipsis;
							/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
							display: -webkit-box;
							/*限制块容器显示的文本行数, 按照你的需求设置*/
							-webkit-line-clamp: 3;
							/*盒子的方向, 垂直、水平等*/
							-webkit-box-orient: vertical;
							/*文字换行, 可以在单词内断*/
							word-wrap: break-word;
						}
					}
				}
			
			
				.wind-list {
					margin-top: 30rpx;
				
				
					.wind {
						display: flex;
						flex-direction: column;
						width: 630rpx;
						padding: 30rpx;
						margin-bottom: 30rpx;
						background-color: #FFFFFF;
						margin-left: 30rpx;
						
						
						.wind-tabs {
							display: flex;
							flex-direction: row;
							align-items: center;
						
							.tab {
								margin-right: 20rpx;
								color: gray;
								height: 60rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								align-items: center;
							}
						
							.tab-current {
								color: #2c2c2c;
								font-weight: bold;
							}
						
						
						}
						
				
						.wind-date {
							color: gray;
							font-size: 24rpx;
						}
				
						.wind-content {
							margin-top: 10rpx;
							
							// /deep/p {
							// 	margin: 20rpx 0;
							// }
							
							
							/deep/img {
								width: 100%;
							}
						}
				
						.wind-pictures {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							margin-top: 20rpx;
				
							width: 610rpx;
							flex-wrap: wrap;
				
							.picture {
								width: 195rpx;
								height: 195rpx;
								border-radius: 10rpx;
								overflow: hidden;
							}
						}
				
					}
				}
				
				.hula-info{
					display: flex;
					flex-direction: column;
					
					.info-item {
						width: 650rpx;
						
						background-color: #ffffff;
						border-radius: 20rpx;
						padding: 20rpx;
						
						margin-left: 30rpx;
						margin-bottom: 30rpx;
						display: flex;
						flex-direction: column;
					
						.title {
							font-size: 32rpx;
							font-weight: bold;
							margin-bottom: 10rpx;
							width: 670rpx;
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;
						}
					
						.info-card {
							display: flex;
							flex-direction: column;
						}
					}
				}
			}

		}
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>
